<template>
  <div class="profile">
    <van-nav-bar title="个人中心" />
    
    <div class="user-info">
      <div class="avatar">
        <img src="https://picsum.photos/100" alt="avatar">
      </div>
      <div class="info" v-if="userInfo">
        <h3>{{ userInfo.name }}</h3>
        <p>{{ userInfo.email }}</p>
      </div>
    </div>

    <van-cell-group inset>
      <van-cell title="我的收藏" is-link to="/favorites" />
      <van-cell title="学习记录" is-link to="/learning-records" />
      <van-cell title="设置" is-link to="/settings" />
    </van-cell-group>

    <div class="logout-btn">
      <van-button round block type="danger" @click="handleLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

onMounted(async () => {
  try {
    await userStore.getUserInfo();
  } catch (error) {
    showToast('获取用户信息失败');
  }
});

const handleLogout = () => {
  userStore.logout();
  router.push('/login');
  showToast('已退出登录');
};
</script>

<style scoped>
.profile {
  min-height: 100vh;
  background: #f7f8f8;
}

.user-info {
  background: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.info {
  margin-left: 20px;
}

.info h3 {
  margin: 0;
  font-size: 18px;
}

.info p {
  margin: 5px 0 0;
  color: #666;
}

.logout-btn {
  margin: 20px;
}
</style>
